@import '@/styles/common/variables.scss';
.module_customization{
  width: calc(100% - 48px);
  height: calc(100% - 48px);
  margin: 24px;
  display: flex;
  .module_style{
    width: 19.2%;
    margin-right: 1%;
  }
  .module_set{
     width: 79.8%;
    .bottom_btn{
      height: 64px;
      line-height: 64px;
      text-align: center;
      border-top: 1px solid #F2F1F0;
      border-bottom: none;
    }
    .show_content{
      height: calc(100% - 120px);
      min-height: 500px;
      display: flex;
      justify-content: center;
      overflow: auto;
      &.alignCenter{
        align-items: center;
      }
    }
    }
  .module_set, .module_style {
    background-color: #fff;
    height: 100%;
    border-radius: 16px;
    >p{
      padding: 0 24px;
      color: #363434;
      font-size: 14px;
      height: 54px;
      line-height: 54px;
      border-bottom: 1px solid #F2F1F0;
    }
  }
  .module_style {
    .show_content{
      padding: 0 24px;
      .module_num{
        >p{
          padding: 16px 0 8px;
          font-size: 12px;
          color: #363434;
        }
      }
    }
  }
  .module_style {

    .module4-1{
      >.module_item_tag{
        width: calc(50% - 2px);
        padding-bottom: calc(25% - 1px);
        height: 0;
        display: inline-block;

        &:nth-of-type(2n){
          margin-left: 2px;
          
        }
        &:nth-of-type(2n+1){
          margin-right: 2px;
        }
        &:nth-of-type(1){
          margin-bottom: 2px;
        }
        &:nth-of-type(2){
          margin-bottom: 2px;
        }
        &:nth-of-type(3){
          margin-top: 2px;
        }
        &:nth-of-type(4){
          margin-top: 2px;
        }
  
      }
    }
  
    .module4-2{
      >.module_item_tag{
        width: calc(25% - 3px);
        padding-bottom: calc((25% - 3px)*4/3);
        height: 0;
        display: inline-block;
        margin-right: 4px;
        &:last-of-type{
          margin-right: 0;
        }
      }
    }
    .module4-3{

      >.module_item_tag{
        padding-bottom: calc(33.3% - 2px);
        height: 0;
        display: inline-block;
        &:nth-of-type(1){
          width: calc(66.7% - 2px);
          margin-right: 2px;
          margin-bottom: 2px;
        }
        &:nth-of-type(2){
          width: calc(33.3% - 2px);
          margin-left: 2px;
          margin-bottom: 2px;
        }
        &:nth-of-type(3){
          margin-top: 2px;
          width: calc(33.3% - 2px);
          margin-right: 2px;
        }
        &:nth-of-type(4){
          margin-top: 2px;
          width: calc(66.7% - 2px);
          margin-left: 2px;
        }
       
      }
    }
    .module4-4{
      >.module_item_tag{
   
        height: 0;
        display: inline-block;
        &:nth-of-type(1){
          width: 100%;
          margin-bottom: 2px;
          padding-bottom: 50%;
        }
        &:nth-of-type(2){
          width: calc(33.3% - 2.7px);
          padding-bottom:  calc(33.3% - 2.7px);
          margin: 2px 2px 0 0;
        }
        &:nth-of-type(3){
          margin-top: 2px;
          width: calc(33.3% - 2.6px);
          padding-bottom:  calc(33.3% - 2.6px);
          margin-right: 2px;
          margin: 2px 2px 0;
        }
        &:nth-of-type(4){
          margin-top: 2px;
          width: calc(33.3% - 2.7px);
          padding-bottom:  calc(33.3% - 2.7px);
          margin-left: 2px;
        }
       
      }
    }
    .module_item{
      margin-bottom: 10px;
      background-color: #F9F9F9;
      width: 100%;
      padding: 8px;
      /*去除子元素设置 display: inline-block;导致的间隙*/
      font-size:0;
      letter-spaceing: -4px;
      &.active {
        >p{
          background-color:#CDCDCD ;
        }
      }
      
      >p{
        background-color: #F2F1F0;
      }
    }
  }

  .module_set{
    .show_content{
      .module_item_set{
        max-width: 800px;
        width: 100%;
        padding: 8px;
        /*去除子元素设置 display: inline-block;导致的间隙*/
        font-size:0;
        letter-spaceing: -4px;
        .module_item_tag{
          border: 1px dashed #CDCDCD;
          border-radius: 4px;
          position: relative;
          cursor: pointer;
          >div{
            position: absolute;
            width: 100%;
            left: 0;
            bottom: 0;
          }
          .el-button{
            display: block;
            margin: 8px auto 0;
          }
          .module_item_Image{
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100%;
          }
          .module_layer{
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(54, 52, 52, 0.12);
            z-index: 3;
          }
          .module_item_content{
            padding-left: 24px;
            z-index: 4;
            .first_title{
              font-size: 20px;
              font-weight: 700;
              color: #FFFFFF;
              margin-bottom: 8px;
            }
            .second_title{
              font-size: 14px;
              color: #FFFFFF;
              margin-bottom: 16px;
            }
            a{
              height: 32px;
              line-height: 32px;
              padding: 0px 25px;
              background-color: rgba(54, 52, 52, 0.4);
              border-radius: 16px;
              font-size: 14px;
              color: #FFFFFF;
              text-decoration: none;
              cursor: pointer;
              margin-bottom: 24px;
              display: inline-block;
              &.noname{
                padding: 0;
              }
            }
          }
        }
      }
      .module4-1{
        >.module_item_tag{
          width: calc(50% - 12px);
          padding-bottom: calc(25% - 6px);
          height: 0;
          display: inline-block;
          
          &:nth-of-type(2n){
            margin-left: 12px;
            
          }
          &:nth-of-type(2n+1){
            margin-right: 12px;
          }
          &:nth-of-type(1){
            margin-bottom: 12px;
          }
          &:nth-of-type(2){
            margin-bottom: 12px;
          }
          &:nth-of-type(3){
            margin-top: 12px;
          }
          &:nth-of-type(4){
            margin-top: 12px;
          }
        }
      }
    
      .module4-2{
        >.module_item_tag{
          width: calc(25% - 18px);
          padding-bottom: calc((25% - 18px)*4/3);
          height: 0;
          display: inline-block;
          margin-right: 24px;
          &:last-of-type{
            margin-right: 0;
          }
        }
      }
      .module4-3{
        >.module_item_tag{
          height: 0;
          display: inline-block;
          padding-bottom: calc(33.3% - 12px);
          &:nth-of-type(1){
            width: calc(66.7% - 12px);
            margin-right: 12px;
            margin-bottom: 12px;
          
          }
          &:nth-of-type(2){
            width: calc(33.3% - 12px);
            margin-left: 12px;
            margin-bottom: 12px;

          }
          &:nth-of-type(3){
            margin-top: 12px;
            width: calc(33.3% - 12px);
            margin-right: 12px;
          }
          &:nth-of-type(4){
            margin-top: 12px;
            width: calc(66.7% - 12px);
            margin-left: 12px;
          }
         
        }
      }
      .module4-4{
        >.module_item_tag{
         
          height: 0;
          display: inline-block;

          &:nth-of-type(1){
            width: 100%;
            margin-bottom: 12px;
            padding-bottom: 50%;
          }

          &:nth-of-type(2){
            width: calc(33.3% - 16px);
            padding-bottom: calc(33.3% - 16px);
            margin: 12px 12px 0 0;
     
          }
          &:nth-of-type(3){
            margin-top: 2px;
            width: calc(33.3% - 16px);
            padding-bottom: calc(33.3% - 16px);
            margin-right: 12px;
            margin: 12px 12px 0;
          }
          &:nth-of-type(4){
            margin-top: 2px;
            width: calc(33.3% - 16px);
            padding-bottom: calc(33.3% - 16px);
            margin-left: 12px;

          }
         
        }
      }
    }
  }
  .upload_module{
    text-align: center;
    width: 100%;
    z-index: 10;
    .el-button{
      margin-left: 16px;
      width: 112px;
      margin-bottom: 16px;
    }

  }
  .uploadTip{
    z-index: 1;
    position: absolute;
    bottom: 8px;
    width: 100%;
    height: auto ;
    font-size: 12px;
    color: #CDCDCD;
    text-align: center;
    padding: 0 16px;
  }
  .pop_container{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    .el-image {
      width: 100%;
      height: 100%;
      img{
        object-fit: cover;
      }
    }

  }
  .el-form {
    .el-form-item__label{
      width: 86px;
    }
    .el-form-item__content{
      width: calc(100% - 86px);
    }
  }
}
.module_customization{
  @include respond('1440'){
    .module_set .show_content .module_item_set{
      max-width: 580px;
    }
  }
}